<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/css/pc_base.css">
    <link rel="stylesheet" href="../dist/style/less/lib/city-picker.css">
    <script>

    </script>
</head>

<body>

    <header class="hd">
        <div class="warp">
            <ul class="btn-list">
                <li class="item">
                    <a href="#" class="shop-car bg">
                        <!--<div class="num">1</div>-->
                        <i class="icon iconfont icon-icon"></i>
                    </a>
                </li>
                 <li  class="item">
                     <a href="./register.html">
                        <i class="iconfont icon-wode"></i>请登录
                    </a>
                    <!--<span href="#" class="bg">
                        <i class="icon iconfont icon-wode"></i>18200398881
                    </span>
                    <ul class="child-item">
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">收货地址</a></li>
                            <li><a href="#">绑定银行卡</a></li>
                            <li><a href="#">退出商场</a></li>
                        </ul>-->
                </li>
            </ul>
            <a href="./">
            <img src="../dist/images/logo.png" alt="" class="logo-img">
             <span class="span_txt">商城首页</span>
            </a>

        </div>
    </header>
    <div class="address-bar">
        <div class="warp">
            <p class="tit">
                <a class="r" href="#">新增收货地址</a> 收货地址
            </p>
            <ul>
                <li class="address-item active" data-value="2/52/502" data-text="北京/北京市/东城区">
                    <p class="name">
                        王小二
                    </p>
                    <p class="phone">18288688888</p>

                    <p class="address_txt">广东深圳南山区南新路多少号啥楼啥号哈哈哈 水电费的风格</p>
                    <div class="address_ft">
                        <a href="#123" class="r edit_btn">修改本地址</a>
                        <a href="#1" class="l">默认地址</a>
                    </div>
                </li>
                <li class="address-item" data-value="6/88/801" data-text="广东/汕头/金平区">
                    <p class="name">
                        王小二
                    </p>
                    <p class="phone">18288688888</p>

                    <p class="address_txt">广东深圳南山区南新路多少号啥楼啥号哈哈哈 水电费的风格</p>
                    <div class="address_ft">
                        <a href="#123" class="r edit_btn">修改本地址</a>
                        <a href="#1" class="l">默认地址</a>
                    </div>
                </li>
                <li class="address-item">
                    <p class="name">
                        王小二
                    </p>
                    <p class="phone">18288688888</p>

                    <p class="address_txt">广东深圳南山区南新路多少号啥楼啥号哈哈哈 水电费的风格</p>
                    <div class="address_ft">
                        <a href="#123" class="r edit_btn">修改本地址</a>
                        <a href="#1" class="l">默认地址</a>
                    </div>
                </li>
                <li class="address-item no-address">
                    <i class="iconfont icon-tianjia1"></i>
                    <p>您还没有收货地址</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="pay-bar">
        <div class="warp">
            <p class="tit">
                支付方式
            </p>
            <ul class="pay-type">
                <li class="pay-item active">
                    <i class="iconfont icon-zhifu"></i>
                    <span>支付宝</span>
                </li>
                <li class="pay-item">
                    <i class="iconfont icon-ananzuiconv267"></i>
                    <span>微信</span>
                </li>

                <li class="pay-item">
                    <img src="../dist/images/qdd-ico.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>

    <div class="order-msg-list">
        <div class="warp">
            <p class="tit">
                订单信息
            </p>
            <ul class="order-list">
                <li class="order-item">
                    <div class="l_img">
                        <img src="../dist/images/tmp1.jpg" alt="">
                    </div>
                    <div class="r_msg">
                        <p class="name">血糖仪</p>
                        <p class="msg">每分钟脉搏/智能语音播报</p>
                    </div>
                    <div class="r_msg2">
                        <p class="r">
                            <span class="price"> <span>¥</span>399</span>
                            <span class="num">X1</span>
                        </p>
                        <p class="sku">颜色分类：黄色；</p>

                    </div>
                </li>
                <li class="order-item">
                    <div class="l_img">
                        <img src="../dist/images/tmp1.jpg" alt="">
                    </div>
                    <div class="r_msg">
                        <p class="name">血糖仪</p>
                        <p class="msg">每分钟脉搏/智能语音播报</p>
                    </div>
                    <div class="r_msg2">
                        <p class="r">
                            <span class="price"> <span>¥</span>399</span>
                            <span class="num">X1</span>
                        </p>
                        <p class="sku">颜色分类：黄色；</p>

                    </div>
                </li>
                <li class="order-item">
                    <div class="l_img">
                        <img src="../dist/images/tmp1.jpg" alt="">
                    </div>
                    <div class="r_msg">
                        <p class="name">血糖仪</p>
                        <p class="msg">每分钟脉搏/智能语音播报</p>
                    </div>
                    <div class="r_msg2">
                        <p class="r">
                            <span class="price"> <span>¥</span>399</span>
                            <span class="num">X1</span>
                        </p>
                        <p class="sku">颜色分类：黄色；</p>

                    </div>
                </li>

            </ul>
        </div>
    </div>

    <div class="remarks-bar">
        <div class="warp">
            <div class="remarks-txt">
                <span>买家备注：</span>
                <input type="text" placeholder="选填，对本次交易订单的说明">
            </div>
            <div class="sub-box">
                <p class="type"><span>支付方式：</span> <span class="val pay-type">微信</span> </p>
                <p class="type"><span>配送方式：</span> <span class="val ">快递免邮</span> </p>
                <p class="type"><span>应付：</span> <span class="val price"> <span>¥</span>399</span>
                </p>
                <a href="" class="sub-btn">提交订单</a>
            </div>
        </div>
    </div>

    <div class="pd-200"></div>

    <footer class="ft">
        <div class="warp">
            <!--<div class="logo-img">
                <img src="../dist/images/logo.png" alt="">
                <p>深圳市养悦源有限公司</p>
                <p>Copyright ©2015 fitcome.com</p>
            </div>-->
            <div class="gs-box">
                <script id="ebsgovicon" src="http://szcert.ebs.org.cn/govicon.js?id=8cd96afc-0ec2-4098-b28f-9ad7aeb714cc&width=42&height=58&type=1"
                    type="text/javascript" charset="utf-8"></script>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#"><span>■</span>在线支付</a></li>
                    <li><a href="#"><span>■</span>售后服务</a></li>
                    <li><a href="#"><span>■</span>第三方配送</a></li>
                    <li><a href="#"><span>■</span>联系我们</a></li>
                </ul>
            </div>
            <div class="qr-box">
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>下载健康云APP</p>
                        </div>
                    </div>
                </div>
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>关注微信公众号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <div class="mask-box none">
    </div>
    <div class="add_address" id="add_address">
        <div class="bg">
            <a class="col_btn">
                <i class="iconfont icon-icon1"></i>
            </a>
            <p class="tit">新增收货地址</p>
            <div class="cont">
                <div class="input_txt2">
                    <span>所在地区</span>
                    <div class="picker-warp">
                        <!-- container -->
                        <input id="city-picker1" readonly type="text">
                        <!--<input id="city-picker1" readonly type="text" data-value="2/52/502">-->

                    </div>
                </div>
                <div class="input_txt">
                    <span>详细地址</span>
                    <input type="text" placeholder="请填写详细地址">
                </div>
                <div class="input_txt">
                    <span>收货人</span>
                    <input type="text">
                </div>
                <div class="input_txt phone">
                    <span>联系电话</span>
                    <div class="qh">0086</div>
                    <span class="line">一</span>
                    <input type="text">
                </div>

                <div class="pd50"></div>
                <a href="#123" class="save-btn">保存</a>
            </div>
        </div>
    </div>

    <div class="add_address" id="edit_address">
        <div class="bg">
            <a class="col_btn">
                <i class="iconfont icon-icon1"></i>
            </a>
            <p class="tit">新增收货地址</p>
            <div class="cont">
                <div class="input_txt2">
                    <span>所在地区</span>
                    <div class="picker-warp">
                        <!-- container -->
                        <input id="city-picker2" readonly type="text">
                        <!--<input id="city-picker1" readonly type="text" data-value="2/52/502">-->

                    </div>
                </div>
                <div class="input_txt">
                    <span>详细地址</span>
                    <input type="text" placeholder="请填写详细地址">
                </div>
                <div class="input_txt">
                    <span>收货人</span>
                    <input type="text">
                </div>
                <div class="input_txt phone">
                    <span>联系电话</span>
                    <div class="qh">0086</div>
                    <span class="line">一</span>
                    <input type="text">
                </div>

                <div class="pd50"></div>
                <a href="#123" class="save-btn">保存</a>
            </div>
        </div>
    </div>


    <script src="../dist/js/lib/jquery.min.js"></script>
    <script src="../dist/js/lib/city-picker.js"></script>
    <script>
        $('.col_btn').on('click', function () {
            $('.mask-box').addClass('none');
            $(this).parents('.add_address').removeClass('active');
        })

        var api = {
            province_url: 'http://yangyueyuan.gxr.com/home/address/getZonesByID?zoneid=1',
            other_url: 'http://yangyueyuan.gxr.com/home/address/getZonesByParentID',
        }
        var dataPicker = {
            PROVINCE_DATA: null,
            CITY_DATA: null,
            DISTRICT_DATA: null
        }
        var $citypicker1,$citypicker2;
        getProvinceData(function (data) {
            provinceData = formatProvince(data);
            dataPicker.PROVINCE_DATA = provinceData;
            $citypicker1 = $('#city-picker1');
            $citypicker1.citypicker({
                spanClick: spanClickFn,
                data: dataPicker
            });

            $("body").on('click', ".no-address", function () {
                $('#add_address').addClass('active');
                $('.mask-box').removeClass('none');
                $citypicker1.citypicker("reset");
            })

            $('body').on('click', '.edit_btn', function () {
                $('#edit_address').addClass('active');
                $('.mask-box').removeClass('none');
                var $this = $(this);
                var valStr = $this.parents(".address-item").data("value");
                var txtStr = $this.parents(".address-item").data("text");
                var valArr = formatDataStr(valStr)
                var txtArr = formatDataStr(txtStr)

                if (valArr[0]) {
                    getData(valArr[0], true, dataPicker, function () {
                        if (valArr[1]) {
                            getData(valArr[1], false, dataPicker, function () {
                                if($citypicker2){
                                    $citypicker2.citypicker("reset");
                                    $('#edit_address').find(".picker-warp").find('.city-picker-span').remove();
                                    $('#edit_address').find(".picker-warp").find('.city-picker-dropdown').remove();
                                }

                                $citypicker2 = $('#city-picker2');
                                $citypicker2.citypicker({
                                    spanClick: spanClickFn,
                                    data: dataPicker,
                                    everyCreate:true, //每次都创建
                                    province: txtArr[0] || "",
                                    city: txtArr[1] || "",
                                    district: txtArr[2] || "",
                                })

                            });
                        }
                    });
                }


            })
        })

        function spanClickFn(el, cb) {
            var code = $(el).data('code');
            var province = false;
            var city = false;
            if ($(el).parents(".province").length != 0) {
                province = true;
            } else if ($(el).parents(".city").length != 0) {
                city = true;
            } else if ($(el).parents(".district").length != 0) {
                cb();
                return true;
            }
            $.ajax({
                'url': api.other_url + "?zoneid=" + code,
                type: 'get',
                success: function (data) {
                    data = JSON.parse(data);
                    if (province) {
                        dataPicker.CITY_DATA = formatOtherData(data);
                    } else {
                        dataPicker.DISTRICT_DATA = formatOtherData(data);
                    }
                    // $this.refresh();
                    cb();
                }
            });
        }

        function getData(code, province, dataPicker, cb) {
            $.ajax({
                'url': api.other_url + "?zoneid=" + code,
                type: 'get',
                success: function (data) {
                    data = JSON.parse(data);
                    if (province) {

                        dataPicker.CITY_DATA = formatOtherData(data);
                    } else {
                        dataPicker.DISTRICT_DATA = formatOtherData(data);

                    }
                    // $this.refresh();
                    cb();
                }
            })
        }

        function formatDataStr(str) {
            var arr = [];
            if (!str) return [];
            return str.split('/');
        }

        function formatProvince(data) {
            var newArr = [], newObj = {};
            for (var i = 0; i < data.length; i++) {
                // newObj[data[i].id] =  data[i].name;
                var dataTmp = {}
                dataTmp.code = data[i].id;
                dataTmp.address = data[i].name;
                newArr.push(dataTmp);
            }
            newObj[" "] = newArr
            return newObj;

        }
        function getProvinceData(cb) {
            $.ajax({
                'url': api.province_url,
                type: 'get',
                success: function (data) {
                    data = JSON.parse(data);
                    cb(data);
                },
                error: function () {
                    console.log('Ajax Error!');
                }

            });
        }
        function formatOtherData(data) {
            var newObj = {};
            if (data == null) {
                return newObj;
            }
            for (var i = 0; i < data.length; i++) {
                // newObj[data[i].id] =  data[i].name;
                newObj[data[i].id] = data[i].name
            }
            return newObj;
        }
        function isEmptyObject(obj) {
            for (var key in obj) {
                return false;
            }
            return true;
        }


    </script>
</body>

</html>
